import React from 'react'
import './index.scss'
import xihuan from '../images/xihuan.png'
import xihuan_active from '../images/xihuan_active.png'
import pinglun from '../images/pinglun.png'
import T from 'prop-types'
import axios from '../../../utils/axios'
import  { message } from '../../../components/message'
import moment from 'moment'
import getTime from '../../../utils/getTime'
export default function Card(props) {
  const { todetail, data = [], query, showDelete = false, toDelete=()=>{} } = props
  const toHeart = (id)=>{
    axios.post('/dynamic/addHeart', { dynamicId: id }).then((res) => {
      query()
      message(res.data.mes)  
    }).catch(err=>{
      message('发生了未知的错误orz')  
    })
  }
  return (
    <>
      {data.length !== 0 ? (
        data.map((item, index) => (
          <div key={`${item.title} ${index}`} className="card">
            <div
              onClick={() => {
                todetail(item.id)
              }}
            >
              <div className="title">{item?.title}</div>
              <div className="ans">{item?.textContent}</div>
            </div>
            <div className="dynamic-btns">
              {/* <img src={dianzan} alt=">_<"></img> */}
              <div>
                <img src={pinglun} alt=">_<"></img>
                <span>{item?.commentTotal > 0 ? item?.commentTotal : ''}</span>
              </div>
              <div
                onClick={() => {
                  toHeart(item.id)
                }}
              >
                <img
                  src={item.isHeart ? xihuan_active : xihuan}
                  alt=">_<"
                ></img>
                <span>{item?.heartId?.split(',').length}</span>
              </div>
              <div>{`评论更新于${
                getTime(item?.updateTime).time + getTime(item?.updateTime).text
              }前`}</div>
            </div>
            <div className='dynamic-delete' style={{display:showDelete?'block':'none'}} onClick={()=>{toDelete(item.id)}}>删除</div>
          </div>
        ))
      ) : (
        <div className="card-none">{'空空如也'}</div>
      )}
    </>
  )
}

Card.propTypes = {
  todetail: T.func,
  data: T.array,
  query: T.func,
  showDelete: T.bool,
  toDelete:T.func,
}
